import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { AdminType } from '@/common/contact';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { Button, Modal, Space, Form, Row, Col } from 'antd';
import {  } from '@/common/contact';
import FormCondition from '@/components/FormCondition';
import { useUpdateEffect } from 'ahooks';
const AuthFormSetting = (props) => {
  const {
    visible = false,
    onClose,
    loading,
    organizationAuthAdminList,
    dispatch,
    onChange
  } = props;
  const { show = false, detail = {}, } = visible;
  const { id, stage, type = 'admin', list = [], disabledList = [] } = detail
  const [form] = Form.useForm();
  const [params, setParams] = useState({})
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  const [stageList, setStageList] = useState([])
  const childRef = useRef();
  useEffect(() => {
    if (show) {
      setParams({ stage })
      setSelectedRowKeys(list)
    }
    else {
      setSelectedRowKeys([])
    }
  }, [show])

  useUpdateEffect(() => {
    childRef.current.fetchGetData();
  }, [params])
  const rowSelectionRadio = {
    type: 'radio',
    hideSelectAll: true,
    getCheckboxProps: (record) => {
      return {
        disabled: disabledList.reduce((item, index) => {
          if (item) {
            return item
          }
          else {
            if (index.id === record.id) {
              return true
            }
            return item
          }
        }, false),
        // Column configuration not to be checked
        id: record.id,
      };
    },
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),
    preserveSelectedRowKeys: true,
  };

  const rowSelectionChecked = {
    type: 'checkBox',
    hideSelectAll: true,
    getCheckboxProps: (record) => {
      return {
        disabled: disabledList.reduce((item, index) => {
          if (item) {
            return item
          }
          else {
            if (index.id === record.id) {
              return true
            }
            return item
          }
        }, false),
        // Column configuration not to be checked
        id: record.id,
      };
    },
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectedRowKeys(selectedRows);
    },
    selectedRowKeys: selectedRowKeys.map((item) => {
      return item.id.toString();
    }),

    preserveSelectedRowKeys: true,
  };

  const searchItems = [
    {
      label: '员工姓名',
      name: 'keyword',
    },
  ];
  const handleUpAudit = () => {
    onChange && onChange(selectedRowKeys, detail)
    onClose()
  };
  const getColumns = [
    {
      title: '姓名',
      dataIndex: 'username',
    },
    {
      title: '岗位类型',
      dataIndex: 'adminType',
      render: (e) => {
        return AdminType[e];
      },
    },
  ];
  const modalProps = {
    title: `负责设置`,
    width: 900,
    visible: typeof visible === 'boolean' ? visible : show,
    maskClosable: true,
    destroyOnClose: true,
    zIndex: 1001,
    confirmLoading: loading,
    footer: <Space>
      <Button onClick={() => onClose()}>取消</Button>
      <Button type='primary' onClick={() => handleUpAudit()}>确定</Button>
    </Space>
  };

  return (
    <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
      <TableDataBlock
        params={{
          ...params,
        }}
        rowSelection={type === 'admin' ? rowSelectionRadio : rowSelectionChecked}
        searchItems={searchItems}
        cRef={childRef}
        loading={loading}
        columns={getColumns}
        rowKey={(record) => `${record.id}`}
        firstFetch={false}
        dispatchType="weCom/fetchSearchOrganizationAdmin"
        {...organizationAuthAdminList}
      ></TableDataBlock>


    </Modal>
  );
};

export default connect(({ weCom, loading }) => ({
  ...weCom,
  loading: loading.models.weCom || loading.models.subscriber,
}))(AuthFormSetting);
